<template>
    <div>
        <h1>{{ title }}</h1>
        <p>{{ description }}</p>
        <button @click="handleClick">Click me</button>
    </div>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
    setup() {
        const route = useRoute();

        const destination = route.query.destination;
        const checkinDate = route.query.checkinDate;
        const checkoutDate = route.query.checkoutDate;
        const guests = route.query.guests;

        const title = `Welcome to ${destination}`;
        const description = `Enjoy your stay at our luxurious hotel in ${destination}`;
        
        const handleClick = () => {
            alert('Button clicked!');
        };

        return {
            title,
            description,
            handleClick
        }
    }
};
</script>

<style scoped>
h1 {
    color: blue;
}
p {
    font-size: 18px;
}
button {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
</style>